<template>
  <div>
    <h1>这是 Child 组件</h1>
    <h3>父组件传递过来的数据: {{msg}}</h3>
    <button @click="send">传值给父组件</button>
  </div>
</template>

<script>
import {defineComponent, ref} from "vue";
import {onMounted} from "vue";

export default defineComponent({
  name: "Child",
  // props 接收的数据不能直接改
  props: { // 接收父组件传递过来的参数
    msg: {
      type: String, // 数据类型校验
      required: true, // 是否必须传参, 默认为 false
      // default: '设置默认值',
    }
  },
  setup(props, ctx){
    let childMsg = ref('我是子组件的数据')
    let childNum = ref(10)
    console.log(props.msg)
    let send = () => {
      // 通过 ctx.emit 分发事件
      // emit 第一个参数是事件名称, 第二个是传递的数据
      // ctx.emit('send', childMsg.value)

      // 第二个参数可以是一个数组来了接收多个参数
      // ctx.emit('send', [childMsg.value, childNum.value])  // arr

      // 第二个参数可以是一个对象
      ctx.emit('send', { // obj
        msg: childMsg.value,
        num: childNum.value,
      })
    }

    // 通过 onMounted 页面加载时传递数据
    onMounted(() => {
      ctx.emit('send', childMsg.value)
    })

    return{
      childMsg,
      childNum,
      send,
    }
  },

})
</script>

<style scoped>

</style>
